<template>
  <div class="file-list">
    <el-alert
      title="文件存在涉敏信息，请做好保密工作！"
      type="warning"
      show-icon
      :closable="false"
    />
    
    <div class="my-8px">
      <el-button @click="expandAll" type="primary" size="small">全部展开</el-button>
      <el-button @click="collapseAll" type="primary" size="small">全部折叠</el-button>
      <el-button 
        @click="batchDownloadFiles" 
        type="success" 
        size="small"
        :loading="downloadLoading"
        :disabled="!hasFiles"
      >
        <Icon icon="ep:download" class="mr-2px" />
        一键下载
      </el-button>
    </div>

    <el-collapse v-model="activeNames">
      <el-collapse-item v-for="(files, stage) in projectFiles" :key="stage" :name="stage">
        <template #title>
          <span class="stage-title">{{ stage }} </span>
        </template>
        <el-tag 
          v-if="shouldShowNoFilesTag(stage, files)" 
          size="large" 
          type="success" 
          class="mb-8"
        >该环节无需上传文件</el-tag>
        <template v-else>
          <div class="file-types-container">
            <div v-for="(column, columnIndex) in getFileTypesForStage(stage)" :key="columnIndex" class="file-types-column">
              <div v-for="fileType in column" :key="fileType" class="file-type-group">
                <el-tag size="large" type="success" class="type-tag mb-8">
                  {{ getDisplayFileType(fileType, stage) }}
                </el-tag>
                <!-- 该文件类型下没有文件时显示未上传提示 -->
                <div v-if="!getFilesByType(fileType, stage).length" class="file-list-item">
                  <img class="mr-8" :src="fileIconObj.unknow" width="35px" />
                  <div class="file-info">
                    <div class="file-name file-not-uploaded">文件未上传</div>
                  </div>
                </div>
                <!-- 遍历显示该类型下的所有文件 -->
                <div v-for="file in getFilesByType(fileType, stage)" 
                     :key="file.doc_id" 
                     class="file-list-item">
                  <img class="mr-8" :src="getFileIcon(file)" width="35px" />
                  <div class="file-info">
                    <div class="file-name" :title="file.file_name">
                      {{ file.file_name }}
                    </div>
                  </div>
                  <span class="file-actions">
                    <el-button 
                      v-if="isPreviewable(file)"
                      type="primary" 
                      size="small" 
                      plain 
                      @click="previewFile(file)">
                      预览
                    </el-button>
                    <el-button 
                      type="primary" 
                      size="small" 
                      plain 
                      @click="downloadFile(file)">
                      下载
                    </el-button>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-collapse-item>
    </el-collapse>

    <el-dialog
      :title="filePreviewName"
      v-model="isPreviewOpen"
      :style="{ height: '100vh', margin: '0 auto', padding: 0 }"
      width="70%"
    >
      <iframe v-if="pdfUrl" :src="pdfUrl" style="width: 100%; height: 85vh"></iframe>
    </el-dialog>
  </div>
</template>

<script setup>
import * as KmsApi from '@/api/project/kms'
import { ref, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import download from '@/utils/download'

const props = defineProps({
  projectDetails: Object,
  fileIconObj: Object,
  previewableTypes: Array,
  projectFiles: Object
});

const isPreviewOpen = ref(false);
const pdfUrl = ref('');
const filePreviewName = ref('');
const activeNames = ref(Object.keys(props.projectFiles));
const downloadLoading = ref(false);

// 计算是否有可下载的文件
const hasFiles = computed(() => {
  return props.projectDetails.filesTableData && props.projectDetails.filesTableData.length > 0;
});

const shouldShowNoFilesTag = (stage, files) => {
  // 项目移交阶段特殊处理
  if (stage === '项目移交') {
    // 检查是否存在以"项目移交-"开头的文件
    const hasTransferFiles = props.projectDetails.filesTableData.some(
      file => file.file_type && file.file_type.startsWith('项目移交-')
    );
    // 只有当固定列表为空且没有动态文件类型时才显示
    return files.length === 0 && !hasTransferFiles;
  }
  // 项目其他文件类型特殊处理
  if (stage === '其他') {
    // 检查是否存在空类型文件或者以"其他-"开头的文件
    const hasOtherFiles = props.projectDetails.filesTableData.some(
      file => !file.file_type || file.file_type.startsWith('其他-')
    );
    // 只有当固定列表为空且没有动态文件类型时才显示
    return files.length === 0 && !hasOtherFiles;
  }
  // 其他阶段直接根据文件类型列表长度判断
  return files.length === 0;
};

// 获取某个阶段下实际存在的所有文件类型
const getActualFileTypesForStage = (stage) => {
  if (stage === '项目移交') {
    // 合并固定文件类型和动态文件类型
    const fileTypes = new Set(props.projectFiles[stage].map(file => file.file_type));
    
    // 添加所有以"项目移交-"开头的文件类型
    props.projectDetails.filesTableData.forEach(file => {
      if (file.file_type && file.file_type.startsWith('项目移交-')) {
        fileTypes.add(file.file_type);
      }
    });
    
    return Array.from(fileTypes);
  }
  if (stage === '其他') {
    // 合并固定文件类型和动态文件类型
    const fileTypes = new Set(props.projectFiles[stage].map(file => file.file_type));
    
    // 添加所有空文件类型或者以"其他-"开头的文件类型
    props.projectDetails.filesTableData.forEach(file => {
      if (!file.file_type || file.file_type.startsWith('其他-')) {
        fileTypes.add(file.file_type);
      }
    });
    
    return Array.from(fileTypes);
  }
  return props.projectFiles[stage].map(file => file.file_type);
};

// 获取显示用的文件类型名称
const getDisplayFileType = (fileType, stage) => {
  if (stage === '项目移交' && fileType && fileType.startsWith('项目移交-')) {
    return fileType.substring('项目移交-'.length);
  }
  if (stage === '其他' && fileType && fileType.startsWith('其他-')) {
    return fileType.substring('其他-'.length);
  }
  if (stage === '其他' && !fileType) {
    return "未知类型";
  }
  return fileType;
};

// 获取指定文件类型和阶段的所有文件
const getFilesByType = (fileType, stage) => {
  if (stage === '项目移交') {
    // 处理动态文件类型
    if (fileType.startsWith('项目移交-')) {
      return props.projectDetails.filesTableData.filter(file => file.file_type === fileType);
    }
    // 处理固定文件类型
    return props.projectDetails.filesTableData.filter(file => 
      file.file_type === fileType || file.file_type === `项目移交-${fileType}`
    );
  }
  if (stage === '其他') {
    // 处理动态文件类型
    if (!fileType || fileType.startsWith('其他-')) {
      return props.projectDetails.filesTableData.filter(file => file.file_type === fileType);
    }
    // 处理固定文件类型
    return props.projectDetails.filesTableData.filter(file => 
      file.file_type === fileType || file.file_type === `其他-${fileType}`
    );
  }
  // 其他阶段保持原有逻辑
  return props.projectDetails.filesTableData.filter(file => file.file_type === fileType);
};

// 获取指定阶段的文件类型列表，并分成两列
const getFileTypesForStage = (stage) => {
  const fileTypes = getActualFileTypesForStage(stage);
  if (!fileTypes.length) return [[], []];

  const totalFiles = fileTypes.reduce((acc, fileType) => {
    const filesCount = Math.max(getFilesByType(fileType, stage).length, 1);
    return acc + filesCount;
  }, 0);
  
  const columns = [[], []];
  let leftCount = 0;
  let rightCount = 0;
  
  fileTypes.forEach(fileType => {
    const filesCount = Math.max(getFilesByType(fileType, stage).length, 1);
    if (leftCount <= rightCount) {
      columns[0].push(fileType);
      leftCount += filesCount;
    } else {
      columns[1].push(fileType);
      rightCount += filesCount;
    }
  });
  
  return columns;
};

const getFileIcon = (file) => {
  return props.fileIconObj[file.suffix] || props.fileIconObj.unknow;
};

const isPreviewable = (file) => {
  return props.previewableTypes.includes(file.suffix);
};

const expandAll = () => {
  activeNames.value = Object.keys(props.projectFiles);
};

const collapseAll = () => {
  activeNames.value = [];
};

// 预览附件
const previewFile = (file) => {
  const params = {
    doc_id: file.doc_id,
    is_preview: true
  }
  KmsApi.previewAndDownloadFile(params).then((res) => {
    filePreviewName.value = file.file_name
    const blobPDF = new Blob([res], { type: 'application/pdf' })
    pdfUrl.value = '/pdfjs/web/viewer.html?file=' + window.URL.createObjectURL(blobPDF)
    isPreviewOpen.value = true
  })
}

// 下载附件
const downloadFile = (file) => {
  const params = {
    doc_id: file.doc_id,
    is_preview: false
  }
  KmsApi.previewAndDownloadFile(params).then((res) => {
    const downloadFileName = file.file_name
    const blobData = new Blob([res])
    const fileUrl = URL.createObjectURL(blobData);
    const link = document.createElement('a');
    link.href = fileUrl;
    link.setAttribute('download', downloadFileName);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(fileUrl);
  })
}

// 批量下载所有文件
const batchDownloadFiles = async () => {
  if (!hasFiles.value) {
    ElMessage.warning('没有可下载的文件');
    return;
  }

  try {
    await ElMessageBox.confirm(
      `确定要下载所有文件吗？共 ${props.projectDetails.filesTableData.length} 个文件将被打包下载。`,
      '批量下载确认',
      {
        confirmButtonText: '确定下载',
        cancelButtonText: '取消',
        type: 'info',
      }
    );

    downloadLoading.value = true;
    
    // 提取所有文件的doc_id
    const docIds = props.projectDetails.filesTableData
      .filter(file => file.doc_id) // 确保doc_id存在
      .map(file => file.doc_id);

    if (docIds.length === 0) {
      ElMessage.warning('没有有效的文件可以下载');
      return;
    }

    // 调用批量下载接口
    const response = await KmsApi.batchDownloadFiles({ doc_id_list: docIds });
    
    // 生成下载文件名（使用当前时间戳）
    const timestamp = new Date().toISOString().slice(0, 19).replace(/[:-]/g, '');
    const fileName = `all_files_${timestamp}.zip`;
    
    // 使用下载工具下载zip文件
    download.zip(response, fileName);
    
    ElMessage.success('文件下载成功');
    
  } catch (error) {
    if (error !== 'cancel') { // 用户取消操作不显示错误
      console.error('批量下载失败:', error);
      ElMessage.error('批量下载失败，请重试');
    }
  } finally {
    downloadLoading.value = false;
  }
};
</script>

<style lang="scss" scoped>
.file-list {
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: 100%;
  box-sizing: border-box;
  
  &::-webkit-scrollbar {
    display: none;
  }
}

.file-types-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

.file-types-column {
  min-width: 0;
}

.file-type-group {
  margin-bottom: 10px;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.type-tag {
  width: 100%;
  display: flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 4px;
}

.file-list-item {
  display: grid;
  grid-template-columns: 35px 1fr auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 4px 8px;
  border: 1px solid #ebebeb;
  background: #ffffff;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.file-info {
  min-width: 0;
}

.file-name {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}

.file-actions {
  display: flex;
  gap: 4px;
  white-space: nowrap;
}

.file-not-uploaded {
  color: #ff4d4f;
  font-style: italic;
}

:deep(.el-collapse-item__header) {
  height: 30px;
  line-height: 30px;
  border-left: 4px solid #2676fd;
  padding-left: 8px;
  font-weight: 600;
  margin-bottom: 8px;
  background-color: #eef1f6;
  color: #2676fd;
}

:deep(.el-collapse-item__header .stage-title) {
  color: #2676fd;
  font-weight: bold;
}

:deep(.el-collapse-item.is-active .el-collapse-item__header)::after {
  transform: rotate(180deg);
}
</style>